<template>
  <div>
    <div
      style="padding-top: 20px"
      v-if="showSearch"
      :class="{
        'enter-level flipInX': showSearch,
      }"
    >
      <el-form :inline="true" :model="videolistsearch" class="demo-form-inline">
        <el-row
          justify="space-around"
          :gutter="25"
          style="margin-left: 0px; margin-right: 0px"
        >
          <el-col :span="5">
            <el-form-item label="视频编号">
              <el-input
                v-model="videolistsearch.id"
                placeholder="请输入视频编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="发布者">
              <el-input
                v-model="videolistsearch.username"
                placeholder="请输入发布者"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="视频分类">
              <el-input
                v-model="videolistsearch.type"
                placeholder="如：任嘉伦"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="视频类型">
              <el-select
                v-model="videolistsearch.typeId"
                placeholder="类型"
                clearable
              >
                <el-option label="普通" value="0" />
                <el-option label="会员" value="1" />
                <el-option label="金币" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"></el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 0px; margin-right: 0px">
          <el-col :span="10" style="margin-left: 2%">
            <el-form-item label="提交时间">
              <div class="block">
                <el-date-picker
                  v-model="loginTime"
                  placeholder="-"
                  :unlink-panels="true"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="9" style="margin-left: 10%">
            <el-form-item>
              <el-button type="primary" @click="getDataList" :icon="Search">
                搜索
              </el-button>
              <el-button type="info" @click="reset" :icon="Refresh">
                重置
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="5"></el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding: 30px">
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-button :icon="Plus" @click="InsertVideo(0)" type="success">
            新增</el-button
          >
          <el-button
            :icon="Delete"
            type="danger"
            plain
            @click="removeLog"
            :disabled="isBatch"
            >删除</el-button
          >
          <el-button :icon="Delete" plain @click="Clearcache" type="primary">
            更新缓存
          </el-button>
        </div>
        <div>
          <el-button
            :icon="Search"
            circle
            @click="showSearch = !showSearch"
          ></el-button>
          <el-button :icon="Refresh" circle @click="reset"></el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="dataList"
        style="width: 100%"
        height="600"
        @selection-change="handleSelectionChange"
        v-loading="dataLoding"
      >
        <el-table-column
          align="center"
          type="selection"
          :selectable="selectable"
          width="55"
        />
        <el-table-column property="id" label="视频编号" width="105" />
        <el-table-column #default="scope" label="视频" width="100">
          <el-image :src="scope.row.firstImgUrl" />
        </el-table-column>
        <el-table-column #default="scope" label="视频类型" width="100">
          <template v-if="scope.row.type == 0">
            <el-tag type="info">普通</el-tag></template
          >
          <template v-if="scope.row.type == 1"
            ><el-tag type="danger">会员</el-tag></template
          >
          <template v-if="scope.row.type == 2"
            ><el-tag type="waring">金币</el-tag></template
          >
        </el-table-column>
        <el-table-column property="gold" label="金币" width="105" />
        <el-table-column property="thumbUp" label="点赞量" width="105" />
        <el-table-column property="collection" label="收藏量" width="105" />
        <el-table-column property="lookCount" label="观看人数" width="105" />
        <el-table-column #default="scope" label="状态" width="105">
          <template v-if="scope.row.status == 1">
            <el-tag type="success">正常</el-tag></template
          >
          <template v-if="scope.row.status == 2"
            ><el-tag type="info">未通过</el-tag></template
          >
        </el-table-column>
        <el-table-column
          #default="scope"
          sortable
          label="提交时间"
          width="205"
          >{{
            tool.formatDateToYYYYMMDD(scope.row.createTime)
          }}</el-table-column
        >
        <el-table-column property="userName" label="发布者" width="105" />
        <el-table-column property="adminName" label="审核者" width="105" />
        <el-table-column property="typeName" label="分类" width="105" />
        <el-table-column #default="scope" label="推荐状态" width="105">
          <template v-if="scope.row.isRecommend == 0">
            <el-tag type="info">不推荐</el-tag></template
          >
          <template v-if="scope.row.isRecommend == 1"
            ><el-tag type="success">推荐</el-tag></template
          >
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="确定要删除吗？"
              @confirm="oneremoveLog(scope.row)"
              @cancel="removeCnacle"
            >
              <template #reference>
                <el-button type="text" :icon="Delete"> 删除 </el-button>
              </template>
            </el-popconfirm>
            <el-button @click="toUpdata(scope.row)" type="text" :icon="Edit">
              修改
            </el-button>
            <el-button type="text" :icon="VideoPlay" @click="onPlay(scope.row)">
              播放
            </el-button>
            <el-dropdown placement="bottom">
              <el-button
                type="text"
                :icon="DArrowRight"
                style="margin-left: 12px"
              >
                更多
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    :icon="Share"
                    @click="Recommend(1, scope.row)"
                  >
                    推荐
                  </el-dropdown-item>
                  <el-dropdown-item
                    :icon="Close"
                    @click="Recommend(0, scope.row)"
                  >
                    取消推荐
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-pagination
          :hide-on-single-page="false"
          background
          layout="prev, pager, next"
          :total="pages.total"
          :page-size="videolistsearch.pageSize"
          :page-count="pages.pages"
          @current-change="changePage"
          :pager-count="15"
        />
      </div>
      <el-dialog
        v-model="dialogOverflowVisible"
        title="修改视频"
        width="400"
        draggable
        overflow
      >
        <el-form-item label="标题">
          <el-input
            v-model="videoUpformdata.title"
            placeholder="请输入金币数量"
          />
        </el-form-item>
        <el-form-item label="类型">
          <div style="display: flex; width: 100%">
            <el-select
              v-model="videoUpformdata.type"
              placeholder="视频类型"
              clearable
            >
              <el-option label="普通" value="0" />
              <el-option label="会员" value="1" />
              <el-option label="金币" value="2" />
            </el-select>
            <el-input
              v-show="videoUpformdata.type == 2 ? true : false"
              v-model="videoUpformdata.gold"
              placeholder="请输入金币数量"
              style="position: relative; left: 2%"
            />
          </div>
        </el-form-item>
        <el-form-item label="点赞量">
          <el-input
            v-model="videoUpformdata.thumbUp"
            placeholder="请输入点赞量"
          />
        </el-form-item>
        <el-form-item label="收藏量">
          <el-input
            v-model="videoUpformdata.collection"
            placeholder="请输入收藏量"
          />
        </el-form-item>
        <el-form-item label="播放量">
          <el-input
            v-model="videoUpformdata.lookCount"
            placeholder="请输入播放量"
          />
        </el-form-item>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="Cancel">取消</el-button>
            <el-button @click="UpdataType">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- <el-dialog
        :before-close="handleBeforeClose"
        v-model="dialogShow"
        title="新增视频"
        width="700"
        draggable
        overflow
      ><br> -->
    </div>

    <el-dialog
      :before-close="handleBeforeClose"
      v-model="dialogShow"
      title="新增视频"
      width="700"
      draggable
      overflow
      ><br />
      <el-form :model="videoform" label-width="auto">
        <el-form-item label="视频标题">
          <el-input v-model="videoform.title" />
        </el-form-item>
        <el-form-item label="视频类型">
          <div style="display: flex; width: 100%">
            <el-select
              v-model="videoform.type"
              placeholder="请选择类型"
              style="width: 40%"
            >
              <el-option label="普通" value="0" />
              <el-option label="会员" value="1" />
              <el-option label="金币" value="2" />
            </el-select>
            <el-input
              v-if="videoform.type == 2"
              v-model="videoform.gold"
              placeholder="请输入金币数量"
              style="position: relative; left: 5%; width: 30%"
            />
          </div>
        </el-form-item>
        <el-form-item label="是否推荐">
          <el-switch v-model="isRecommend" />
        </el-form-item>
        <el-form-item label="视频分类">
          <!-- <el-checkbox-group v-model="typeId" @change="handleCheckboxChange">
            <el-checkbox
              v-if="typedata[0]"
              :value="typedata[0].id"
              :name="typedata[0].name"
            >
              {{ typedata[0].name }}
            </el-checkbox>
            <el-checkbox
              v-if="typedata[1]"
              :value="typedata[1].id"
              :name="typedata[1].name"
            >
              {{ typedata[1].name }}
            </el-checkbox>
            <el-checkbox
              v-if="typedata[2]"
              :value="typedata[2].id"
              :name="typedata[2].name"
            >
              {{ typedata[2].name }}
            </el-checkbox>
            <el-checkbox
              v-if="typedata[3]"
              :value="typedata[3].id"
              :name="typedata[3].name"
            >
              {{ typedata[3].name }}
            </el-checkbox>
          </el-checkbox-group> -->
          <div class="m-4">
            <el-select-v2
              v-model="videoform.typeId"
              :options="options"
              placeholder="视频分类"
              style="width: 240px"
              multiple
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="2"
            />
          </div>
          <el-button
            :icon="Refresh"
            style="margin-left: 90%"
            circle
            @click="InsertVideo(1)"
          ></el-button>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-radio-group v-model="videoform.status">
            <el-radio value="0">未审核</el-radio>
            <el-radio value="1">通过</el-radio>
            <el-radio value="2">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="视频描述">
          <el-input v-model="videoform.desc" type="textarea" />
        </el-form-item>
        <el-upload
          style="margin-left: 6%"
          v-model:file-list="fileList"
          class="upload-demo"
          accept="video/*"
          limit="1"
          action="#"
          :auto-upload="false"
          :http-request="CommentRequest"
          :on-change="handleChange"
          :on-remove="handleRemove"
        >
          <el-button type="primary">视频上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              <el-progress v-show="schedule" :percentage="count" />
              <!-- <span v-if="transferRate != 0">
                {{ transferRate.toFixed(2) }}Kb/s
              </span> -->
            </div>
          </template>
        </el-upload>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="VideoCancel">取消</el-button>
          <el-button @click="InsertMuset">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="centerDialogVisible"
      width="70%"
      height="100"
      :show-close="false"
      destroy-on-close
      :close="closeVideo"
      center
    >
      <video
        controls="controls"
        width="100%"
        height="600px"
        :poster="video.images"
      >
        <source :src="video.url" type="video/ogg" />
        <source :src="video.url" type="video/mp4" />
      </video>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from "axios";
import tool from "@/assets/js/tool";
import request from "@/assets/js/request";
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Search,
  Refresh,
  Delete,
  Plus,
  Share,
  Close,
  DArrowRight,
  VideoPlay,
  Edit,
} from "@element-plus/icons-vue";

//视频参数
const video = ref({
  images: "",
  url: "",
});
const centerDialogVisible = ref(false);
const videolistsearch = ref({
  id: null,
  beginTime: null,
  endTime: null,
  username: "",
  type: "", //分类
  typeId: null, //类型
  idlist: "",
  reviewtype: 1,
  pageNum: 1,
  pageSize: 20,
});
// const typeId = ref([]);
const isRecommend = ref(false);
const videoform = ref({
  title: "",
  type: null,
  isRecommend: false,
  typeId: [],
  status: null,
  desc: "",
  gold: null,
  totalchunk: null,
  firstImgUrl: "",
  videoUrl: "",
});
const fileList = ref([]);
const dataList = ref([]);
const pages = ref({
  total: 0,
  pages: 0,
});
//进度条
const count = ref(0);
const schedule = ref(false);
//传输速率
const transferRate = ref(0);
//修改弹窗
const dialogOverflowVisible = ref(false);
//修改
const videoUpformdata = ref({
  id: null,
  title: "",
  type: "",
  gold: null,
  thumbUp: null,
  collection: null,
  lookCount: null,
});
//新增弹窗
const dialogShow = ref(false);
//修改视频类型参数
const videotype = ref({ type: null, id: null });
//时间区间
const loginTime = ref();
const showSearch = ref(true);
const dataLoding = ref(false);

// 记录当前批量删除tag的步骤
const selectable = ref();
const isBatch = ref(true);
const selectKey = ref([]);

// const timer = ref();
const isStop = ref(false);
//分片上传
const retryCount = ref(0);
const file = ref(null);
const chunkSize = ref(1024 * 1024 * 5);
const totalChunks = ref(0);
const chunk = ref([]);
const upmsg = ref("");
//视频分类数据
const typedata = ref([]);
const total = ref(0);
const pageNum = ref(1);
const uuid = ref(null);
//分片上传成功计数
const upsucces = ref(0);
//视频分类选项
const value3 = ref([]);
const options = ref([]);
//视频分片上传-选中
const handleChange = async (e) => {
  setTimeout(() => {
    schedule.value = true;
    isStop.value = true;
    count.value = 0;
    upsucces.value = 0;
    retryCount.value = 0;
    file.value = e.raw;
    uuid.value = new Date().getTime();
    totalChunks.value = Math.ceil(file.value.size / chunkSize.value);
    for (let i = 0; i < totalChunks.value; i++) {
      const start = i * chunkSize.value;
      const end = Math.min((i + 1) * chunkSize.value, file.value.size);
      chunk.value[i] = file.value.slice(start, end);
    }
    toUpVideo(retryCount.value);
  }, 1000);
};
//新增关闭前
const handleBeforeClose = (done) => {
  if (count.value === 0 && upmsg.value === "") {
    value3.value = [];
    schedule.value = false;
    chunk.value = [];
    upsucces.value = 0;
    count.value = 0;
    upmsg.value='';
    isStop.value=false
    done();
  }
};
//视频播放
const onPlay = (data) => {
  centerDialogVisible.value = true;
  video.value.images = data.firstImgUrl;
  video.value.url = data.videoUrl;
};
//视频播放关闭
const closeVideo = () => {
  video.value.images = "";
  video.value.url = "";
};
//分片上传请求
const upVideoRequest = (formdata, key, startTime, uuid) => {
  axios({
    method: "post",
    url: "https://zfb.bydhy.top/admin/video/updatatest",
    data: formdata,
    onUploadProgress: (progressEvent) => {
      const now = Date.now();
      const timeElapsed = now - startTime;
      const bytesUploaded =
        progressEvent.loaded * (key + 1) + progressEvent.loaded;
      transferRate.value = bytesUploaded / timeElapsed / 1024; //字节/每秒
    },
  })
    .then((reponse) => {
      console.log('上传数据：'+reponse.data);
      toUpVideo(key+1)   
      upsucces.value=upsucces.value+1;
      count.value = Math.round(upsucces.value * (99/ totalChunks.value))
      if (upsucces.value=== totalChunks.value) {
        isStop.value=false;
        setTimeout(() => {
          VideoMerge(uuid,totalChunks.value) 
        }, 3000)
      }
    })
    .catch((error) => {
      ElMessage.error(error.message);
    });
};
//视频分片合并
const VideoMerge = (uuid, total) => {
  request
    .get(
      `/admin/video/merge?uuid=${uuid}&total=${total}`
    )
    .then((res) => {
      if (res.code === 200) {
        upmsg.value = "上传成功";
        chunk.value = [];
        upsucces.value=0;
        videoform.value.firstImgUrl = res.data.firstImage;
        videoform.value.videoUrl = res.data.videoUrl;
        console.log(videoform.value.videoUrl ); 
        setTimeout(()=>{
          count.value=100
        },600)
      }
    })
    .catch((err) => {
      console.log("错误信息：", err.message);
    });
};
//上传取消
const handleRemove = (e) => {
  chunk.value = [];
  retryCount.value=0
  upmsg.value = "";
  upsucces.value=0;
  isStop.value = false;
  console.log(e);
  schedule.value = false;
  count.value = 0;
  console.log('upmag取消：'+upmsg.value);
  
  removeUpVideo();
};
//上传后未提交数据-删除视频
const removeUpVideo = () => {
  if (videoform.value.firstImgUrl != "") {
    request
      .post(
        `/admin/video/delvideo?img=${videoform.value.firstImgUrl}&video=${videoform.value.videoUrl}`
      )
      .then((res) => {
        console.log("获取成功：", res);
      })
      .catch((err) => {
        console.log("错误信息：", err.message);
      });
  }
};

//分片上传事件
const toUpVideo = (retryCount) => {
  const startTime = Date.now();
  const formData = new FormData();
  formData.append("chunk", chunk.value[retryCount]);
  formData.append("chunkIndex", retryCount);
  formData.append("totalChunks", totalChunks.value);
  formData.append("uuid", uuid.value);
  if (retryCount <= totalChunks.value - 1 && isStop.value) {
    upmsg.value = "视频上传中.......";
    upVideoRequest(formData, retryCount, startTime, uuid.value);
  } else {
    ElMessage.error("已经完全上传/已上传取消");
  }
  // try {
  //     upVideoRequest(formData, i, startTime, uuid.value);
  // } catch (error) {
  //   ElMessage.error(error.message);
  // }

  // try {
  //     upVideoRequest(formData, i, startTime, uuid.value);
  // } catch (error) {
  //   ElMessage.error(error.message);
  // }
};
// timer.value = null;
// };
//新增取消
const VideoCancel = () => {
  if (upmsg.value == '' && count.value == 0 && upsucces.value == 0) {
    value3.value = [];
    chunk.value = [];
    retryCount.value = 0;
    totalChunks.value = 0;
    schedule.value = false;
    upsucces.value = 0;
    count.value = 0;
    dialogShow.value = false;
    fileList.value = [];
    upmsg.value = "";
    videoform.value = {
      title: "",
      type: null,
      isRecommend: false,
      typeId: null,
      status: null,
      desc: "",
      videoUrl: "",
      firstImgUrl: "",
    };
  } else {
    ElMessage.error("请先取消上传");
  }
};
//单选
// const handleCheckboxChange = () => {
//   if (typeId.value.length > 1) {
//     // 只保留最后一个被选中的值
//     typeId.value = [typeId.value[typeId.value.length - 1]];
//   }
//   videoform.value.typeId = typeId.value[0];
// };
//获取视频分类
const InsertVideo = (data) => {
  pageNum.value = pageNum.value + data;
  if (data === 1 && pageNum.value <= total.value) {
    getTyperequest(pageNum.value);
  } else {
    dialogShow.value = true;
    getTyperequest(pageNum.value);
  }
};
//获取视频分类请求
const getTyperequest = () => {
  request.get(`/type/typepage`).then((res) => {
    if (res.code === 200) {
      typedata.value = res.data;
      res.data.forEach((item, index) => [
        (options.value[index] = {
          value: item.id,
          label: item.name,
        }),
      ]);
    }
  });
};

//确定idlist
const getIdList = (data) => {
  if (data.length > 0) {
    data.forEach((element) => {
      videolistsearch.value.idlist =
        element + "," + videolistsearch.value.idlist;
    });
  }
};
//修改弹窗
const toUpdata = (data) => {
  videoUpformdata.value.id = data.id;
  videoUpformdata.value.type = data.type.toString();
  videoUpformdata.value.title = data.title;
  videoUpformdata.value.collection = data.collection;
  videoUpformdata.value.gold = data.gold;
  videoUpformdata.value.thumbUp = data.thumbUp;
  videoUpformdata.value.lookCount = data.lookCount;
  dialogOverflowVisible.value = true;
};
//弹窗取消
const Cancel = () => {
  videotype.value.id = null;
  videotype.value.type = null;
  dialogOverflowVisible.value = false;
};
//修改确定
const UpdataType = () => {
  request
    .post("/admin/video/updata", videoUpformdata.value)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
        getDataList();
      }
      Cancel();
    })
    .catch((err) => {
      ElMessage.error(err.mesage);
    });
};
//确定开始和结束时间分开
const separate = (data) => {
  if (data) {
    videolistsearch.value.beginTime = data[0];
    videolistsearch.value.endTime = data[1];
  }
};
//新增请求
const InsertMuset = () => {
  videoform.value.isRecommend = isRecommend.value === true ? 1 : 0;
  if (upmsg.value != "" && fileList.value.length > 0) {
    request
      .post("/admin/video/inser", videoform.value)
      .then((res) => {
        console.log(res);
        upmsg.value = "";
        upsucces.value = 0;
        count.value = 0;
        chunk.value = [];
        ElMessage.error(res.msg);
        if (res.code === 200) {
          VideoCancel();
        }
      })
      .catch((err) => {
        ElMessage.error(err.message);
      });
  } else {
    ElMessage.error("请先上传视频");
  }
};
//清空缓存
const Clearcache = () => {
  ElMessageBox.confirm("确定清空缓存?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request
        .get("/admin/video/clearcache")
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("清除成功");
          } else {
            ElMessage.error("清除失败");
          }
        })
        .catch((err) => {
          ElMessage.error(err.message);
        });
    })
    .catch(() => {});
};

//获取数据
const getDataList = () => {
  dataLoding.value = true;
  getIdList(selectKey.value);
  separate(loginTime);
  request
    .post("/admin/video/page", videolistsearch.value)
    .then((res) => {
      if (res.code === 200) {
        dataList.value = res.data.list;
        pages.value.total = res.data.total;
        pages.value.pages = res.data.pages;
      } else {
        ElMessage.error(res.msg);
      }
      dataLoding.value = false;
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
  setTimeout(() => {
    dataLoding.value = false;
  }, 5000);
};
//推荐--取消推荐
const Recommend = (key, data) => {
  if (key === data.isRecommend) {
    ElMessage.error(key === 0 ? "不需要取消推荐" : "以在推荐列表");
  } else {
    request
      .post(`/admin/video/set?isrecommend=` + key + "&id=" + data.id)
      .then((res) => {
        if (res.code === 200) {
          ElMessage.success("操作成功");
          getDataList();
        } else {
          ElMessage.error("操作失败");
        }
      })
      .catch((err) => {
        ElMessage.error(err.message);
      });
  }
};
//换页
const changePage = (pageIndex) => {
  videolistsearch.value.pageNum = pageIndex;
  getDataList();
};
//删除请求
const removeRequest = () => {
  console.log("发送：" + videolistsearch.value.idlist);
  request
    .post(`/admin/video/del?idlist=` + videolistsearch.value.idlist)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("删除成功");
      } else {
        ElMessage.error("删除失败");
      }
      getDataList();
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
  selectKey.value = [];
};
//批量删除事件
const removeLog = () => {
  getIdList(selectKey.value);
  ElMessageBox.confirm("确定删除所选项?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      removeRequest();
    })
    .catch(() => {
      selectKey.value = [];
      videolistsearch.value.idlist = "";
    });
};
//单删确定
const oneremoveLog = (data) => {
  videolistsearch.value.idlist = data.id;
  removeRequest();
  getDataList();
};
//单删取消
const removeCnacle = () => {
  videolistsearch.value.idlist = "";
};
const reset = () => {
  loginTime.value = "";
  videolistsearch.value = {
    id: null,
    beginTime: null,
    endTime: null,
    username: "",
    type: "", //分类
    typeId: null, //类型
    idlist: "",
    reviewtype: 1,
    pageNum: 1,
    pageSize: 20,
  };
  getDataList();
};

// 多选
const handleSelectionChange = (val) => {
  console.log(val);
  let arr = val.map((item) => item.id);
  selectKey.value = arr;
  if (selectKey.value.length > 0) {
    isBatch.value = false;
  } else {
    isBatch.value = true;
  }
};

onMounted(() => {
  getDataList();
});
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-form-item__label {
  font-weight: bold;
}

.el-form {
  display: inline;
}

.activeTag {
  background: #fef0f0;
  border: #fde2e2 1px solid;
  color: #f67777;
}
.el-input {
  position: relative;
  display: inline-block;
  width: 220px;
}
</style>
